<template>
  <el-container>
    <el-main>
      <el-form
        ref="formRef"
        :inline="true"
        :model="searchForm"
        style="float: left; margin-bottom: -10px"
      >
        <el-form-item label="TableCode">
          <el-input v-model="searchForm.rowId" clearable size="small" />
        </el-form-item>
        <el-form-item label="表名称">
          <el-input v-model="searchForm.name" clearable size="small" />
        </el-form-item>
        <el-form-item label="数据库">
          <el-input v-model="searchForm.dataBaseName" clearable size="small" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-search"
            round
            size="small"
            @click="getDataList()"
          >搜索</el-button>
          <el-button
            icon="el-icon-refresh"
            type="warning"
            round
            size="small"
            @click="searchResetForm()"
          >重置</el-button>
        </el-form-item>
      </el-form>
      <el-dropdown
        ref="toolRef"
        style="float: right; padding-top: 5px"
        trigger="click"

        :hide-on-click="false"
      >
        <el-button title="列" icon="el-icon-s-grid" circle />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item key="all" label="all">
            <el-checkbox
              key="all"
              v-model="cloumn_all_checked"
              label="all"
              @click.stop.native
              @change="cloumnAllChecked"
            >全选</el-checkbox>
          </el-dropdown-item>
          <hr>
          <el-checkbox-group v-model="checkedTableColumns">
            <el-dropdown-item
              v-for="(column, i) in showColumns"
              :key="i"
              :label="i"
            >
              <el-checkbox :key="i" :label="i">{{ column.label }}</el-checkbox>
            </el-dropdown-item>
          </el-checkbox-group>
        </el-dropdown-menu>
      </el-dropdown>
      <el-table
        :ref="ref"
        border
        :height="Height"
        :data="dataList"
        @selection-change="dataListSelectionChangeHandle"
        @sort-change="dataListSortChangeHandle"
      >
        <el-table-column
          type="selection"
          header-align="center"
          align="center"
          width="50"
        />
        <el-table-column
          v-if="showColumns.rowId.show"
          prop="rowId"
          label="TableCode"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.name.show"
          prop="name"
          label="表名称"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.itype.show"
          prop="itype"
          label="表类型"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.dateKey.show"
          prop="dateKey"
          label="时间KEY"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.partitionKey.show"
          prop="partitionKey"
          label="分区KEY"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.partitionNum.show"
          prop="partitionNum"
          label="分区数量"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.wardKey.show"
          prop="wardKey"
          label="病区KEY"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.primaryKey.show"
          prop="primaryKey"
          label="主键"
          header-align="center"
          align="center"
        />
        <el-table-column
          v-if="showColumns.dataBaseName.show"
          prop="dataBaseName"
          label="数据库"
          header-align="center"
          align="center"
        />
        <el-table-column label="操作" header-align="center" width="250">
          <template slot-scope="scope">
            <el-button
              type="warning"
              size="mini"
              @click="initDialog('addUpdateDialogRef', scope.row)"
            >修改</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="deleteHandle(scope.row, scope.row.username)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-main>

    <el-footer
      ref="footerRef"
    >
      <vxe-pager
        border
        align="left"
        :current-page="page"
        :page-size="limit"
        :total="total"
        :layouts="layouts"
        @page-change="handlePageChange"
      />
    </el-footer>
  </el-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module' // 分页相关js
export default {
  name: 'Table',
  mixins: [mixinViewModule],
  data() {
    return {
      Height: 1,
      mixinViewModuleOptions: {
        getDataListUrl: '/zero/page',
        deleteUrl: '/sysUser/del',
        addUrl: '/sysUser/add',
        updateUrl: '/sysUser/update'
      },
      resetPasswordUrl: '/sysUser/resetPassword',
      showColumns: {
        rowId: { label: 'TaleCode', show: true },
        name: { label: '表名称', show: true },
        itype: { label: '表类型', show: true },
        dateKey: { label: '时间KEY', show: true },
        partitionKey: { label: '分区KEY', show: true },
        partitionNum: { label: '分区数量', show: true },
        wardKey: { label: '病区KEY', show: true },
        primaryKey: { label: '主键', show: true },
        dataBaseName: { label: '数据库', show: true }
      }
    }
  }, created() {
    this.$nextTick(() => { // 在数据加载完，重新渲染表格--防止过滤列时表格抖动
      this.Height = document.documentElement.clientHeight -
      (this.$refs.footerRef.$el.clientHeight + this.$refs.formRef.$el.clientHeight +
      this.$refs.toolRef.$el.clientHeight + 50)
    })
  },
  methods: {
    handleClick(row) {
    }
  }
}
</script>
